<template>
  <div class="forum-discuss">
    <div class="forum  flex justify-between pl-8 pr-6">
      <div class="text-lg">评论</div>
      <n-button size="small" type="primary" @click="handlePublish">发布</n-button>
    </div>
    <!-- 评论功能 -->
    <div class="forum-content flex mt-2">
      <n-avatar
        class="ml-6"
        round
        :size="48"
        src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"
      />
      <editor
        class="w-10/12 ml-10"
        placeholder="请输入"
        :toolbarVisible="false"
        :editor-height="'150px'"
        @change="(content) => editorContent = content"
      />
    </div>
    <!-- 评论区 -->
    <div class="text-lg pl-6 mt-4">全部评论</div>
    <div class="forum-box my-4">
      <div class="forum-box flex w-11/12">
        <n-avatar
          class="ml-6"
          round
          :size="32 "
          src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"
        />
        <span class="ml-6 text-base">jack</span>
        <n-tag class="ml-2" size="small" :bordered="false" type="error">
          Lv6
        </n-tag>
        <span class="flex-auto ml-2 text-xs mt-1 text-slate-400">来自江西</span>
        <span class="text-slate-400">1分钟前</span>
      </div>
      <editor
        class="w-10/12 ml-20"
        readOnly
        initHtml="<p>这是一条评论</p><p>这是一条评论</p><p>这是一条评论</p><p>这是一条评论</p><p>这是一条评论</p><p>这是一条评论</p>"
        :toolbarVisible="false"
        :editor-height="'100px'"
      />
      <!-- 点赞回复 -->
      <div class="good-res ml-20 my-2">
        <span class=" hvr-grow cursor-pointer">👍</span>
        <span class="ml-4  hvr-grow cursor-pointer text-sky-500" @click="isForum = !isForum">💬 {{ !isForum  ? '回复' : '取消回复' }}</span>
      </div>
      <div v-if="isForum" class="flex items-center">
        <editor
          class="w-10/12 ml-20 mr-8"
          placeholder="回复jack："
          :toolbarVisible="false"
          :editor-height="'100px'"
          @change="(content) => editorContent = content"
        />
        <n-button size="small" type="primary">确定</n-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import {requestCreateOrUpdateArticle} from "../../../api/bbs/bbsApi";
const editorContent = ref('')
const isForum = ref(false)
const handlePublish = () => {
  if (!editorContent.value) {
    return
  }
  // console.log(editorContent.value)
  requestCreateOrUpdateArticle(editorContent.value).then(resolve =>{
    editorContent.value = {}
    $message.success('添加成功')
  })
}
</script>

<style lang="less" scoped>
.forum-discuss {
  // background-color: rgb(211, 229, 237);
}
</style>
